<!-- 自定义下拉刷新与上拉加载演示(vue) -->
<template>
  <view class="commit-box">
    <view class="list-box">
      <view class="top">
        <view class="studentInfo">
          <!-- 信息正确 -->
          <view class="studentInfo-inner">
            <view class="success-inner">
              <view class="icon iconfont icon-tongguo"></view>
              考生身份信息核验成功！
            </view>
          </view>
          <view class="student-box">
            <view class="title">{{ currentStudentInfo.anonymousNumber ? '考生序号' : '应考考生信息'}}</view>
            <view class="student-inner-box" v-if="currentStudentInfo.anonymousNumber" style="display: flex;align-items: center;justify-content: center;font-size: 36px">
              {{ currentStudentInfo.anonymousNumber }}
            </view>
            <view class="student-inner-box" v-else>
              <view class="des">
                <text class="des-title">考生姓名：</text>
                <text>{{ currentStudentInfo.studentName }}</text>
              </view>
              <view class="des">
                <text class="des-title">身份证号：</text>
                <text>{{ currentStudentInfo.studentIdcard }}</text>
              </view>
              <view class="des">
                <text class="des-title">手机号：</text>
                <text>{{ currentStudentInfo.studentMobile }}</text>
              </view>
              <view class="des">
                <!-- <text class="info-des">第<text></text>3考站</text> -->
                <text class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ currentStudentInfo.round }}</text>轮</text>
                <text class="info-des">第<text style="font-size: 30px;font-weight: 600;padding: 0 4px;">{{ currentStudentInfo.scene }}</text>场</text>
                <text class="info-des">考站：<text style="font-size: 24px;font-weight: 600;padding: 0 0px;">{{ currentStudentInfo.recordsStationName }}</text></text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <scroll-view class="middle" scroll-y="true">
        <view class="middle-content">
          <view class='middle-title'>题卡信息</view>
          <view class="list-inner">
            <view class="list-title">题目</view>
            <view class="list-des">{{ examInfo.examName }}</view>
          </view>
          <view class="list-inner">
            <view class="list-title">题干</view>
            <view class="list-des"><pre style='overflow: auto;'>{{ examInfo.examText }}</pre></view>
          </view>

          <view class="list-inner" v-for="(item, index) in examInfo.cueCardList" :key="index">
            <view class="list-title">提示卡 {{ index + 1 }}</view>
            <view class="details-title">{{ item.cueContent }}</view>
          </view>
          <view class="list-inner">
            <view class="list-title">物资物品清单</view>
            <view
              class="point-list"
              v-for="(item, index) in examInfo.selfInspectionCardList"
              :key="index"
            >
              <view class="point-des">
                {{ item.specificRequirement }}
                <text style="padding-left: 4px;">* {{ item.count }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="btn-box">
        <u-button type="primary" size='large' shape='circle' v-if="status == 0" @click="beginHandle" :disabled="unUsed">
          <text class="icon iconfont icon-ready" style="font-size: 20px;padding-right: 6px;"></text>
          准备就绪 {{btnTitle}}
        </u-button>
        <u-button v-if="status == 1" :disabled="true" type="primary" size='large' shape='circle' color="linear-gradient(to right, #00695C, #004D40)">
          <text class="icon iconfont icon-shijianzhunbeijiuxu" style="font-size: 20px;padding-right: 6px;"></text>
          已就绪，请等待统一考试
        </u-button>
      </view>
    </view>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
// 地址：https://www.solacemeta.com/platform-api/app/examination/list
import hccmStore from '@/common/hccm-store.js'
import mRequest from '@/api/learn.js'
import mRequestIndex from '@/api/index.js'
export default {
  data() {
    return {
      requestLoading: false,
      nickname: '',
      userId: '',
	    commentPersonType:'',
      scanInfo: '',
      cueCardList: [],//提示卡
      selfInspectionCardList: [], //物资物品清单
      examinationInfo:{}, //题干信息，后面可能扫码通过id获取
      unUsed: true,
      canClick: false,
      btnTitle: '（8s）',
      count: 9,
      params: {
        pageNumber: 0,
        pageSize: 10,
        regionCode: wx.getStorageSync("regionCode"),
        sortType: "desc",
        sortColumn: "creatTime",
      },
      timer: null, // 计时器
      intervalId: null, //获取状态

      scanStudentId: '',
      examinationId: '', //考试Id
      currentStudentInfo: {},
      status: '0',
      examInfo: {}
    };
  },
  methods:{ 
    // 习题详情
    getExaminationInfo(){
      let params = {
        id: this.examinationId,
        limit: 1000,
        page: 1,
      }
      mRequest
        .examinationList(params)
        .then(res => {
          this.examinationInfo = res.data.records[0]
        })
        .catch(err => {
          this.requestLoading = false;
        });
    },
    // 获取提示卡
    getCueCard() {
      let params = {
        examinationId: this.examinationId,
        limit: 1000,
        page: 1,
      };
      mRequest
        .getCueCard(params)
        .then(res => {
          this.cueCardList = res.data.records;
        })
        .catch(err => {
          this.requestLoading = false;
        });
    },
    // 获取物资物品清单
    getSelfInspectionCard() {
      let params = {
        examinationId: this.examinationId,
        limit: 1000,
        page: 1,
      };
      mRequest
        .getSelfInspectionCard(params)
        .then(res => {
          this.selfInspectionCardList = res.data.records;
        })
        .catch(err => {
          this.requestLoading = false;
        });
    },
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.count > 0) {
          this.count -= 1;
          this.btnTitle = `（${this.count}s）`
        } else {
          this.btnTitle = ''
          this.unUsed = false
          this.clearCountdown();
        }
      }, 1000);
    },
    startInterval() {
      this.intervalId = setInterval(() => {
				this.getStudentInfo(this.scanStudentId)
        this.recordsStationTeacherList(hccmStore.getUser().teacherId)
      }, 5000);
    },
    stopInterval() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null
      }
    },
    clearCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    scrolltolower() {
      // 触底的时候请求数据，即为上拉加载更多
      var allTotal = this.params.pageSize * (this.params.pageNumber + 1)
      if (allTotal < this.total) {
        ++this.params.pageNumber
      } else {
        this.canClick = true
      }
    },
    startHandle(){
      hccmStore.setExaminationId(JSON.stringify(this.examinationInfo));
	    console.log('this.scanInfo',this.scanInfo.scanInfo)
      uni.navigateTo({
        url: `/pages/commit/playing?scanInfo=${this.scanInfo}`,
      });
    },
    getStudentInfo(id){
      mRequestIndex.recordsStationStudentList({id}).then(res=>{
        this.currentStudentInfo = res.data.records[0]
      })
    },
    // 老师的考试状态
    recordsStationTeacherList(id){
      let params = {
        id
      }
      mRequestIndex.recordsStationTeacherList(params).then(res=>{
        this.status = Number(res.data.records[0].status)
      })
    },
    // 获取考试内容
    getExaminationDetail(examinationId){
      mRequestIndex.examinationDetail({examinationId}).then(res=>{
        this.examInfo = res.data
        console.log(this.examInfo)
      })
    },
    back(){
      uni.navigateTo({
        url: `/pages/home/index`,
      })
    },

    // 准备就绪
    beginHandle(){
      let params = {
        id: this.currentStudentInfo.id,
        recordsTeacherId: hccmStore.getUser().teacherId,
        status: "1"   //0、待考1、就绪、2在考、3结束、4缺考
      }
      mRequestIndex.readyExam(params).then(res=>{
        this.$refs.message.show({
          type:'success', //String 默认default
          msg:'已就绪，请等待统一考试', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:1000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
        this.getStudentInfo(this.currentStudentInfo.id)
        this.recordsStationTeacherList(hccmStore.getUser().teacherId)

      })
    },
  },
  beforeDestroy() {
    this.clearCountdown();
    this.stopInterval();
  },
  onUnload() {
    this.clearCountdown();
    this.stopInterval();
  },
  onHide() {
    this.clearCountdown();
    this.stopInterval();
  },
  onLoad(options) {
    this.scanStudentId = options.scanStudentId
    this.examinationId = options.examinationId
    this.getStudentInfo(this.scanStudentId)
    this.recordsStationTeacherList(hccmStore.getUser().teacherId)
    this.getExaminationDetail(this.examinationId)
    this.startCountdown();
    // this.getExaminationInfo()
    // this.getCueCard()
    // this.getSelfInspectionCard()
    // console.log(this.examinationInfo)

    
  },
  watch:{
    status(n,o){
      // 状态就绪的时候需要进行监听是否需要考试的状态
      if(n == 1){
       this.startInterval()
      }else if(n == 2){
        // TODO
        this.stopInterval() //清除状态的计时器
        this.clearCountdown();
        uni.navigateTo({
          url: `/pages/home/exam/playing?scanStudentId=${this.scanStudentId}&examinationId=${this.examinationId}`,
        })
        console.log('需要跳转到考试页面')
      }
    },

  },
};
</script>

<style lang="scss">
.commit-box{
  background: #fff;
  // height: 100vh ;
  :deep(.cu-bar){
    border-bottom: 1px solid #F1F3F4 !important;
  }
}
.list-box{
  padding: 0 20px 10px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  .top{
    color: #333333;
  }
  .middle{
    max-height: calc(100vh - 250px);
    background: #fff;
    border-radius: 8px;
    width: auto;
    box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.1);
    margin: 10px 0;
    padding: 10px;
    overflow: auto;
    .middle-content{
      width: 100%;
      .middle-title{
        height: 34px;
        line-height: 34px;
        color: #000000;
        font-size: 21px;
        font-weight: 600;
      }
      .list-inner{
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #E2E2E2;
        .list-title{
          color: #777777;
          font-size: 18px;
          font-weight: 600;
          padding-bottom: 8px;
          box-sizing: content-box;
          height: 26px;
          line-height: 26px;
        }
        .details-title{
          font-size: 16px;
        }
        .list-des{
          color: #333333;
          font-size: 13px;
          font-weight: 400;
        }
      }
      .list-inner:last-of-type{
        border: none;
      }
    }
    .point-list{
      .point-des{
        line-height: 23px;
        position: relative;
        padding-left: 10px;
        font-size: 14px;
      }
      .point-des:before{
        content: '';
        height: 5px;
        width: 5px;
        border-radius: 100%;
        background: #333;
        position: absolute;
        left: 0;
        top: 8px;
      }
    }
  }
}
.studentInfo{
  color: #333;
  font-size: 18px;
  // padding: 20px;
  overflow: auto;
  background: #fff;
  .studentInfo-inner{
    .success-inner{
      padding: 20px;
      background: $u-primary;
      border-radius: 8px;
      font-size: 18px;
      color: #fff;
      font-weight: 600;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .iconfont{
        padding-right: 10px;
      }
    }
    .error-inner{
      background: $u-error;
    }
  }

  .student-box{
    margin-top: 10px;
    border-radius: 8px;
    border: 1px solid $u-primary;
    padding: 10px 20px;
    .title{
      color: $u-primary;
      font-weight: 600;
      text-indent: 10px;
      position: relative;

    }
    .title:before{
      height: 60%;
      width: 3px;
      border-radius: 2px;
      background: $u-primary;
      content: '';
      position: absolute;
      left: 0;
      top: 20%;
    }
    .student-inner-box{
      padding: 10px 0;
      .des{
        padding: 6px 0 ;
        .des-title{
          color: #666;
        }
        .info-des{
          padding-right: 10px;
        }
      }
    }
  }
  
  .student-box-error{
    border: 1px solid $u-error;
    .title{
      color: $u-error;
    }
  }
}
.btn-box{
  display: flex;
  justify-content: center;
  align-items: center;
  // padding: 20px;
  .u-button{
    width: auto;
    padding: 0 40px;
    font-size: 18px;
  }
}
</style>
